<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="产品名称" width="100" prop="name">
			<template #default="scope">
				<span>{{ scope.row.name }}</span>
			</template>
		</el-table-column>
		<el-table-column label="产品标签" width="110" prop="label">
			<template #default="scope">
				<p class="label" v-for="item in scope.row.label">{{ item }}</p>
			</template>
		</el-table-column>
		<el-table-column label="最高可贷额度" width="110" prop="maxMoney">
			<template #default="scope">
				<span>{{ scope.row.maxMoney }}</span>
			</template>
		</el-table-column>
		<el-table-column label="利息" width="100" prop="interest">
			<template #default="scope">
				<span>{{ scope.row.interest }}</span>
			</template>
		</el-table-column>
		<el-table-column label="最长期限" width="90" prop="maxMonth">
			<template #default="scope">
				<span>{{ scope.row.maxMonth }}</span>
			</template>
		</el-table-column>
		<el-table-column label="发布机构" width="90" prop="institution">
			<template #default="scope">
				<span>{{ scope.row.institution }}</span>
			</template>
		</el-table-column>
		<el-table-column label="还款方式" width="90" prop="repay">
			<template #default="scope">
				<span>{{ scope.row.repay }}</span>
			</template>
		</el-table-column>
		<el-table-column label="使用对象" width="90" prop="useObject">
			<template #default="scope">
				<span>{{ scope.row.useObject }}</span>
			</template>
		</el-table-column>
		<el-table-column label="产品简介" width="90" prop="introduct">
			<template #default="scope">
				<span>{{ scope.row.introduct.substring(0, 19) }}...</span>
			</template>
		</el-table-column>
		<el-table-column label="产品特点" width="90" prop="feature">
			<template #default="scope">
				<span>{{ scope.row.feature.substring(0, 19) }}...</span>
			</template>
		</el-table-column>
		<el-table-column label="申请条件" width="90" prop="condition">
			<template #default="scope">
				<span>{{ scope.row.condition.substring(0, 19) }}...</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="200">
			<template #default="scope">
				<el-button
					size="small"
					type="primary"
					@click="handleLook(scope.$index, scope.row)"
					>查看</el-button
				>
				<el-button
					size="small"
					type="primary"
					@click="handleEdit(scope.$index, scope.row)"
					>修改</el-button
				>
				<el-button
					size="small"
					type="primary"
					@click="handleDelete(scope.$index, scope.row)"
					>删除</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev, pager, next"
		:total="total"
		@current-change="handleChange"
		:page-size="4"
	/>
</template>

<script setup lang="ts">
import { useProductStore } from "../../store/product";
import { productDel, productGet } from "../../api/product";
import { productType } from "../../types/product";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const store = useProductStore();
let tableData = ref<productType[]>([]);
let total = ref<number>(0);

//查询产品接口
productGet(1).then((res) => {
	total.value = res.data.count;
	store.productList = res.data.results;
	tableData.value = res.data.results;
});

//查看
const handleLook = (index: number, row: any) => {
	store.index = -1;
	router.push({
		path: "/product/detail",
		query: { ...row },
	});
};

//修改
const handleEdit = (index: number, row: any) => {
	store.index = index;
	router.push({
		path: "/product/detail",
		query: { ...row },
	});
};

//删除
const handleDelete = (index: number, row: any) => {
	productDel(row.objectId).then(() => {
		tableData.value.splice(index, 1);
	});
};

//分页按钮
const handleChange = (num: number) => {
	productGet(num).then((res) => {
		store.productList = res.data.results;
		tableData.value = res.data.results;
		total.value = res.data.count;
	});
};
</script>

<style scoped>
:deep(.cell) {
	text-align: center;
}
.label {
	border-radius: 4px;
	background-color: #ecf7fd;
	color: #268be9;
	margin: 0;
	padding: 5px 10px;
	margin-bottom: 5px;
}
.el-pagination {
	margin-top: 10px;
}
</style>
